<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <%- include('./common/meta.ejs', { title: '优品汇商城' }) %>
    <!-- 注意：将特定于组件的 <style> 移到了各自的 partial 文件中 -->
    <style>
      /* 添加全局样式 */
      :root {
        --primary-color: #4169e1;
        --hover-color: #f8f9fa;
        --text-color: #333333;
        --border-color: #e5e7eb;
      }

      /* 确保分类菜单在其他元素之上 */
      #category-sidebar {
        position: relative;
        z-index: 40;
      }

      /* 优化滚动条样式 */
      .submenu::-webkit-scrollbar {
        width: 4px;
      }

      .submenu::-webkit-scrollbar-track {
        background: #f1f1f1;
      }

      .submenu::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 2px;
      }

      .submenu::-webkit-scrollbar-thumb:hover {
        background: #555;
      }
    </style>
  </head>
  <body class="bg-white text-gray-800">
    <%- include('partials/top-notice') %> <%- include('partials/header', {
    categories: categories }) %>

    <main>
      <!-- 主要内容区域：分类侧边栏 + 轮播图 + 登录框 -->
      <div class="relative max-w-[1480px] mx-auto mt-4">
        <div class="flex gap-x-3">
          <!-- 分类侧边栏 -->
          <div class="w-[240px] flex-shrink-0">
            <%- include('partials/category-sidebar', { categories: categories,
            bannerHeight: bannerHeight }) %>
          </div>

          <div class="flex-1">
            <div class="mb-4">
              <div class="relative">
                <div
                  class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
                >
                  <i class="fas fa-search text-gray-400"></i>
                </div>
                <input
                  type="text"
                  placeholder="搜索商品"
                  class="w-full pl-11 pr-4 py-3 bg-gray-100 border border-gray-200 rounded-md text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-150"
                />
                <button
                  class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-600 text-white px-6 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                >
                  搜索
                </button>
              </div>
            </div>
            <div class="flex gap-x-3">
              <!-- 主内容区域 -->
              <div class="flex-1">
                <%- include('partials/main-slider', { banners: banners,
                bannerHeight: bannerHeight }) %>
              </div>

              <!-- 登录框 -->
              <div class="w-[300px] flex-shrink-0">
                <div
                  class="bg-gradient-to-br h-[<%=bannerHeight%>px] from-white to-blue-50 rounded-lg border border-gray-200 p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 flex flex-col"
                >
                  <!-- 登录框头部 -->
                  <div class="text-center mb-6">
                    <h2 class="text-2xl font-semibold text-gray-900">
                      欢迎回来
                    </h2>
                    <p class="text-sm text-gray-600 mt-1">请登录您的账号</p>
                  </div>

                  <form
                    action="/auth/login"
                    method="POST"
                    class="space-y-6 flex-1 flex flex-col"
                  >
                    <!-- 用户名输入框 -->
                    <div class="relative">
                      <label
                        for="username"
                        class="block text-sm font-medium text-gray-700 mb-1"
                        >用户名</label
                      >
                      <div class="relative">
                        <span
                          class="absolute z-50 inset-y-0 left-0 pl-3 flex items-center text-gray-400"
                        >
                          <i class="fas fa-user"></i>
                        </span>
                        <input
                          type="text"
                          id="username"
                          name="username"
                          required
                          class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 bg-white/80 backdrop-blur-sm"
                          placeholder="请输入用户名"
                        />
                      </div>
                    </div>

                    <!-- 密码输入框 -->
                    <div class="relative">
                      <label
                        for="password"
                        class="block text-sm font-medium text-gray-700 mb-1"
                        >密码</label
                      >
                      <div class="relative">
                        <span
                          class="absolute z-50 inset-y-0 left-0 pl-3 flex items-center text-gray-400"
                        >
                          <i class="fas fa-lock"></i>
                        </span>
                        <input
                          type="password"
                          id="password"
                          name="password"
                          required
                          class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 bg-white/80 backdrop-blur-sm"
                          placeholder="请输入密码"
                        />
                      </div>
                    </div>

                    <!-- 记住我和忘记密码 -->
                    <div class="flex items-center justify-between">
                      <div class="flex items-center">
                        <input
                          type="checkbox"
                          id="remember-me"
                          name="remember-me"
                          class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded cursor-pointer"
                        />
                        <label
                          for="remember-me"
                          class="ml-2 block text-sm text-gray-700 cursor-pointer"
                        >
                          记住我
                        </label>
                      </div>
                      <a
                        href="/auth/forgot-password"
                        class="text-sm text-blue-600 hover:text-blue-700 hover:underline transition duration-200"
                      >
                        忘记密码？
                      </a>
                    </div>

                    <!-- 登录按钮 放在底部 -->
                    <div class="flex-1 flex items-end">
                      <button
                        type="submit"
                        class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-md hover:shadow-lg transition duration-200"
                      >
                        <i class="fas fa-sign-in-alt mr-2"></i>
                        登录
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <%- include('partials/icon-menu', { menus: menus }) %> <%-
      include('partials/product-section', { sectionTitle: '热门商品', products:
      hotProducts, viewMoreLink: '/hot-products', viewMoreText:
      '查看所有热门商品' }) %> <%- include('partials/product-section', {
      sectionTitle: '为你推荐', products: recommendProducts, viewMoreLink:
      '/recommendations', viewMoreText: '发现更多', sectionClass: 'bg-gray-50'
      }) %> <%- include('partials/instagram-feed') %>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-100 border-t border-gray-200">
      <div class="max-w-screen-xl mx-auto px-4 py-12 md:py-16">
        <%- include('partials/newsletter-signup') %> <%-
        include('partials/footer-links') %> <%-
        include('partials/footer-bottom') %>
      </div>
    </footer>

    <!-- 回到顶部组件 -->
    <%- include('partials/back-to-top') %>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
      // Banner Swiper Initialization
      new Swiper('#main-swiper .swiper-container', {
          loop: true,
          speed: 1000,
          autoplay: {
              delay: 5000,
              disableOnInteraction: false,
              pauseOnMouseEnter: true
          },
          effect: 'fade',
          fadeEffect: {
              crossFade: true
          },
          pagination: {
              el: '#main-swiper .swiper-pagination',
              clickable: true
          },
          navigation: {
              nextEl: '#main-swiper .swiper-button-next',
              prevEl: '#main-swiper .swiper-button-prev'
          },
          on: {
              init: function() {
                  const activeSlide = document.querySelector('.swiper-slide-active');
                  if (activeSlide) {
                      const elements = activeSlide.querySelectorAll('.slide-title, .slide-desc, .slide-btn');
                      elements.forEach(el => {
                          el.style.transform = 'translateY(0)';
                          el.style.opacity = '1';
                      });
                  }
              }
          }
      });

      // --- 分类侧边栏交互 JS ---
      const sidebar = document.getElementById('category-sidebar');
      const l2Panel = document.getElementById('category-l2-panel');
      const l2PanelTitle = document.getElementById('l2-panel-title');
      const l2PanelList = document.getElementById('l2-panel-list');
      const l1Items = sidebar.querySelectorAll('.category-l1-item');

      // 将完整的分类数据存储在 JS 中（假设已传递到 EJS）
      // 注意：在 EJS 中直接输出 JS 对象需要序列化
      const categoriesData = <%- JSON.stringify(categories || []) %>;
      let activeL1Item = null;
      let hoverTimeout = null; // 用于延迟隐藏

      l1Items.forEach(item => {
          item.addEventListener('mouseenter', (event) => {
              clearTimeout(hoverTimeout); // 清除可能存在的隐藏计时器
              const categoryId = item.getAttribute('data-category-id');
              const category = categoriesData.find(cat => cat.id == categoryId); // 使用 == 因为属性值是字符串

              // 移除之前的高亮
              if (activeL1Item) {
                  activeL1Item.classList.remove('is-hovered');
              }
              // 添加当前高亮
              item.classList.add('is-hovered');
              activeL1Item = item;

              if (category && category.children && category.children.length > 0) {
                  l2PanelTitle.textContent = category.name; // 更新二级面板标题
                  l2PanelList.innerHTML = ''; // 清空旧列表

                  category.children.forEach(child => {
                      const li = document.createElement('li');
                      const a = document.createElement('a');
                      a.href = `/category/${child.id}`; // 假设二级分类也有独立页面
                      a.textContent = child.name;
                      a.className = 'block px-3 py-2 text-sm text-gray-600 hover:text-green-600 hover:bg-gray-50 rounded transition duration-150';
                      li.appendChild(a);
                      l2PanelList.appendChild(li);
                  });
                  l2Panel.classList.add('is-active'); // 显示面板
              } else {
                  // 如果没有子分类，则隐藏面板
                  l2Panel.classList.remove('is-active');
                  l2PanelList.innerHTML = ''; // 清空
                   l2PanelTitle.textContent = '二级分类'; // 重置标题
              }
          });
      });

      // 当鼠标离开侧边栏和弹出面板组合区域时，隐藏面板
      sidebar.addEventListener('mouseleave', () => {
          // 设置一个短暂的延迟，允许鼠标移动到 L2 面板上
          hoverTimeout = setTimeout(() => {
              if (activeL1Item) {
                  activeL1Item.classList.remove('is-hovered');
                  activeL1Item = null;
              }
              l2Panel.classList.remove('is-active');
          }, 150); // 150ms 延迟
      });

       // 如果鼠标进入 L2 面板，则取消隐藏计时器
      l2Panel.addEventListener('mouseenter', () => {
           clearTimeout(hoverTimeout);
      });
       // 如果鼠标离开 L2 面板，则隐藏
      l2Panel.addEventListener('mouseleave', () => {
           hoverTimeout = setTimeout(() => {
               if (activeL1Item) {
                  activeL1Item.classList.remove('is-hovered');
                  activeL1Item = null;
              }
              l2Panel.classList.remove('is-active');
          }, 150);
      });
    </script>
  </body>
</html>
